<template>
  <div>
    <div class="from">
      <div class="title">
{{ $t('Registries_addRegistries')}}
      </div>
      <el-tabs v-model="tabsName" type="border-card" style="margin: 10px 20px; border-radius: 5px;">
        <el-tab-pane :label="  $t('Registries_publicRepository')" name="Hub">
          <RegTabs @success="success" :name="tabsName"></RegTabs>
        </el-tab-pane>
        <el-tab-pane :label="  $t('Registries_customizedRepository')" name="diy">
          <RegTabs @success="success" :name="tabsName"></RegTabs>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="from" style="margin-top:30px">
      <div class="title">
         {{ $t('Registries_registriesLists')}}
      </div>
      <RegTable :ins="ins" style="margin: 10px 20px; border-radius: 5px; border: 1px solid #f2f2f2;"></RegTable>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Tabs, TabPane } from 'element-ui'
import RegTabs from '@/components/registries/RegTabs'
import RegTable from '@/components/registries/RegTable'
Vue.use(Tabs)
Vue.use(TabPane)

export default {
  data () {
    return {
      tabsName: 'Hub', // 当前显示的tab栏
      ins: false
    }
  },
  methods: {
    // 添加注册表成功后改变ins，让table组件重新加载数据
    success () {
      this.ins = !this.ins
    }
  },
  components: {
    RegTabs,
    RegTable
  }
}
</script>
